import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import ElementUI from "element-ui"; //核心代码
import "element-ui/lib/theme-chalk/index.css"; //element css代码
import "./assets/styles/el-reset.less";
import "./assets/styles/base.less"; //引入基本样式
import qfSubMenu from "qf-sub-menu";
import bus from "./utils/bus" //引入bus

Vue.prototype.$bus = bus;

Vue.use(qfSubMenu)
Vue.use(ElementUI); //注入到所有的子组件
// Vue.config.productionTip = false;

//使用阿里字体图标,symbol

//手动创建script标签,然后添加到页面中

let script = document.createElement("script");
script.src = "//at.alicdn.com/t/font_2401295_h55upd4op3l.js";
document.documentElement.appendChild(script);

//路由守卫=>路由钩子函数 beforeEach

//1.判断用户是否登入
//如果登入了 那么放行next
//如果没有登入 访问其它页面的时候,直接跳转回到登入页

//2.如何判断用户是否登入
//判断locatstorage中是否存了token

//为什么要把用户菜单获取的逻辑放在此处,因为刷新页面,菜单会丢失

router.beforeEach((to, from, next) => {
  //to=>目标路径对象
  //from=>原路径对象
  //next=>调用了next相当于放行,组件才能渲染
  // console.log("to====", to);
  // console.log('from====', from)
  // next()
  let token = localStorage.getItem("qf-token") || "";

  if (!token) {
    //没有登入
    //没有登入的情况下,只能访问login页面,其他页面一律不能访问,访问了就跳转回到login
    //没有登入的情况下是可以访问login页面的
    if (to.path === "/login") {
      next();
    } else {
      //访问了login以外的页面 直接重定向到login页面
      next({ path: "/login" });
    }
  } else {
    //已经登入的情况
    // next();
    //判断用户菜单有没有生成;
    if (store.state.sideMenu.length === 0) {
      //没有生成
      store.dispatch("FETCH_MENU_LIST")
        .then(() => {
          next({ path: to.path })
          ///这里要注意, next里面要传参数即要进入的页面的路由信息，因为next传参数后，当前要进入的路由会被废止，转而进入参数对应的路由，虽然是同一个路由，这么做主要是为了确保addRoutes生效了。
        })
    } else {
      next()
    }
  }
});


//全局后置钩子
//已经进入了页面,没有必要再使用next放行
router.afterEach(function (to, from) {
  // console.log(to.matched)
  //通过to.matached中匹配到的数据,来完成面包屑的功能
  let breadCrumb = [...to.matched];
  //因为当前项目,匹配到的第0项是一个空字符串路径,所以这一项我们不需要的,可以把它删掉
  breadCrumb.splice(0, 1)
  // console.log(breadCrumb)
  //将breadCrumb存到vuex中的state
  store.commit("SET_BREADCRUMB", breadCrumb)
})

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
